<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { BasePageReq, BasePageResp } from "@/api/baseType";
import { getUserList } from "@/api/user";
//表格数据
const tableData = ref<any>([]);
//分页参数
const pageReq = ref<BasePageReq>({ page: 1, limit: 10 });
//分页器参数
const paginationParam = ref<BasePageResp>({
  total: 0,
  size: 0,
  current: 0,
  searchCount: false,
  pages: 0,
});
//页面查询
const pageQuery = async () => {
  const res: any = await getUserList(pageReq.value);
  if (res.code === 200) {
    tableData.value = res.data.list;
    paginationParam.value = res.data;
  }
};

//页码变更时
const handleCurrentChange = (current: number) => {
  pageReq.value.page = current;
  pageQuery();
};
//页数变更时
const handleSizeChange = (size: number) => {
  pageReq.value.limit = size;
  pageReq.value.page = 1;
  pageQuery();
};
//页面加载
onMounted(() => {
  pageQuery();
});

//分配角色
const assignRole = (row: any) => {
  console.log(row);
};
//编辑
const handleEdit = (row: any) => {
  console.log(row);
};
//删除
const handleDelete = (row: any) => {
  console.log(row);
};
</script>

<template>
  <el-card style="height: 80px">
    <el-form :inline="true" class="form">
      <el-form-item label="用户名：">
        <el-input placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">搜索</el-button>
        <el-button type="default">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin-top: 10px">
    <el-button type="primary">新增</el-button>
    <el-button type="danger">批量删除</el-button>
    <el-table border>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="nickname" label="昵称"></el-table-column>
      <el-table-column prop="role" label="角色"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="success"
            size="small"
            @click="assignRole(scope.row)"
            icon="User"
            >分配角色</el-button
          >
          <el-button
            type="warning"
            size="small"
            icon="Edit"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            icon="Delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="paginationParam?.current"
      :page-size="paginationParam?.size"
      :page-sizes="[10, 15, 20]"
      :background="true"
      layout="prev, pager, next, jumper,->,total, sizes"
      :total="paginationParam?.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<style lang="scss" scoped>
.form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
